<template>
  <div class="uploader-normal">
    <a-upload
      v-model:file-list="fileList"
      v-bind="$attrs"
      :action="action"
      :data="{ filePath: '/upload-files' }"
      list-type="picture-card"
      @preview="onPreview"
      @change="onChange"
    >
      <div v-if="fileList.length < maxCount">
        <plus-outlined />
        <div style="margin-top: 8px">{{ text }}</div>
      </div>
    </a-upload>
  </div>
</template>

<script>
import { PlusOutlined } from '@ant-design/icons-vue';
import { uploadProps, useUploader } from './useUpload.js';

export default {
  name: 'upload-normal',
  components: {
    PlusOutlined,
  },
  props: {
    ...uploadProps,
    text: { type: String, default: '请上传' },
  },
  setup(props, ctx) {
    const { fileList, action, onChange, onPreview } = useUploader(props, ctx);

    return { fileList, action, onChange, onPreview };
  },
};
</script>

<style scoped lang="less"></style>
